<template>
  <div class="app-container">
    <el-form :model="params">
      <div class="params">
        <el-form-item label="报损仓库">
          <el-select placeholder="请选择" v-model="params.warehouseId">
            <el-option
              v-for="item in warehouse"
              :key="item.warehouseId"
              :value="item.warehouseId"
              :label="item.warehouseName"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select placeholder="请输入" v-model="params.plType">
            <el-option v-for="item in paramsOption.shop_pl_type" :label="item.dictLabel" :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select placeholder="请输入" v-model="params.dealState">
            <el-option v-for="item in paramsOption.shop_deal_state" :label="item.dictLabel" :value="item.dictValue"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            v-model="params.date"
            value-format="YYYY-MM-DD"
            type="daterange"
            range-separator="——"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
          />
        </el-form-item>
        <span></span>
        <el-form-item>
          <div class="btn">
            <el-button :icon="Search" type="primary" @click="init"> 查询 </el-button>
            <el-button :icon="RefreshRight" plain type="primary" @click="reset">重置</el-button>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <div class="tabel-head">
      <div v-for="(item, index) in daylist" :key="item" :class="{ active: index == active }" @click="setTimeRange(index)">
        {{ item }}
      </div>
    </div>
    <div class="table">
      <el-table :data="data" style="width: 100%" max-height="calc(100vh - 450px)">
        <el-table-column prop="inventoryDealId" label="单据编码" width="160" />
        <el-table-column prop="checkCode" label="关联编码" width="160" />
        <el-table-column prop="plType" label="类型">
          <template #default="scope">
            {{ paramsOption.shop_pl_type.filter(v => v.dictValue == scope.row.plType)[0].dictLabel }}
          </template>
        </el-table-column>
        <el-table-column prop="warehouseName" label="仓库" min-width="200" />
        <el-table-column prop="dispProductNum" label="数量" width="120">
          <template #default="scope">
            {{ scope.row.dispProductNum }}
            <img class="icon" v-if="scope.row.dispProductNum > 0" src="@/assets/images/up.png" alt="" />
            <img class="icon" v-else-if="scope.row.dispProductNum < 0" src="@/assets/images/down.png" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="dispProductPartNum" label="件数" width="120">
          <template #default="scope">
            {{ scope.row.dispProductPartNum }}
            <img class="icon" v-if="scope.row.dispProductPartNum > 0" src="@/assets/images/up.png" alt="" />
            <img class="icon" v-else-if="scope.row.dispProductPartNum < 0" src="@/assets/images/down.png" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="dispBuyMoney" label="涉及采购金额" width="120">
          <template #default="scope">
            {{ scope.row.dispBuyMoney }}
            <img class="icon" v-if="scope.row.dispBuyMoney > 0" src="@/assets/images/up.png" alt="" />
            <img class="icon" v-else-if="scope.row.dispBuyMoney < 0" src="@/assets/images/down.png" alt="" />
          </template>
        </el-table-column>
        <el-table-column prop="dealState" label="状态" width="120">
          <template #default="scope">
            <el-tag :type="getStatus(scope.row.dealState).color">{{ getStatus(scope.row.dealState).name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" width="180" />
        <el-table-column label="操作" fixed="right" width="230">
          <template #default="scope">
            <el-button
              type="primary"
              link
              size="small"
              v-if="scope.row.dealState == 2"
              @click="
                toPath({
                  path: '/procure/profit/detail',
                  query: {
                    inventoryDealId: scope.row.inventoryDealId
                  }
                })
              "
              >确认</el-button
            >

            <el-button
              type="primary"
              link
              size="small"
              v-if="scope.row.dealState != 2"
              @click="
                toPath({
                  path: '/procure/profit/detail',
                  query: {
                    inventoryDealId: scope.row.inventoryDealId
                  }
                })
              "
              >详情</el-button
            >
          </template>
        </el-table-column>
        <template #empty>
          <el-empty />
        </template>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        v-model:current-page="params.page"
        v-model:page-size="params.size"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="init"
        @current-change="init"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { RefreshRight, Search } from "@element-plus/icons-vue";
import { selectDictDataByType } from "@/apis/dict/dict";
import { getList } from "@/apis/profit";
import { useRouter } from "vue-router";
import { getlistByTenantId } from "@/apis/procure/inventory-count";

const router = useRouter();
const warehouse = ref([]);
const daylist = ["全部", "今天", "昨天", "近7天", "近30天"];
const params = ref({
  size: 10,
  page: 1
});
const paramsOption = ref({});
const active = ref(0);
const total = ref(0);
const data = ref([]);
const toPath = obj => {
  //打开新页签
  const routeUrl = router.resolve(obj);
  window.open(routeUrl.href, "_blank");
};
const reset = () => {
  params.value = {};
  init();
};
const setTimeRange = index => {
  active.value = index;
  const getTime = day => {
    const today = new Date();
    const sevenDaysBack = new Date(today);
    sevenDaysBack.setDate(sevenDaysBack.getDate() - day);
    return format(sevenDaysBack);
  };
  const format = time => {
    const today = new Date(time);
    const year = today.getFullYear();
    const month = String(today.getMonth() + 1).padStart(2, "0"); // 月份是从0开始的，所以加1
    const day = String(today.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
  };
  switch (index) {
    case 0:
      params.value.date = null;
      params.value.startTime = undefined;
      params.value.endTime = undefined;
      break;
    case 1:
      params.value.date = [format(new Date()), format(new Date())];
      break;
    case 2:
      params.value.date = [getTime(1), getTime(1)];
      break;
    case 3:
      params.value.date = [getTime(7), format(new Date())];
      break;
    case 4:
      params.value.date = [getTime(30), format(new Date())];
      break;
    default:
      break;
  }
  init();
};
const getStatus = status => {
  const colorArr = ["primary", "warning", "success"];
  return {
    color: colorArr[status - 1],
    name: paramsOption.value.shop_deal_state.filter(v => v.dictValue == status)[0].dictLabel
  };
};
const init = async () => {
  if (params.value.date) {
    params.value.startTime = params.value.date[0];
    params.value.endTime = params.value.date[1];
  }
  let res = await getList({ ...params.value, date: undefined });
  data.value = res.data.records;
  total.value = res.data.total;
};
/**
 * 获取列表选项字典
 * @param {*} dictType 字典类型
 */
const getDict = async dictType => {
  const res = await selectDictDataByType(dictType);
  paramsOption.value[dictType] = res.data;
};
onMounted(async () => {
  const dictArr = ["shop_pl_type", "shop_deal_state"];
  dictArr.forEach(v => {
    getDict(v);
  });
  const res = await getlistByTenantId();
  warehouse.value = res.data;
  setTimeout(() => {
    init();
  }, 100);
});
</script>

<style scoped lang="scss">
$border: 1px solid #dcdfe6;
$topic: #007dff;

.params {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 50px;
  position: relative;
  background: #f6f8fa;
  padding: 20px;
  margin-bottom: 20px;
  ::v-deep(.el-select__wrapper),
  ::v-deep(.el-input__wrapper) {
    background: white !important;
  }
  .btn {
    flex: 1;
    display: flex;
    justify-content: end;
    position: absolute;
    bottom: 0;
    right: 0;

    .el-button--primary {
      background: $topic;
      border-radius: 0;
      border: none;
    }

    .is-plain {
      border: 1px solid $topic;
      background: none;

      &:hover {
        background: none;
        color: $topic;
      }
    }
  }
}

.tabel-head {
  height: 30px;
  display: flex;
  margin-bottom: 20px;

  > div {
    min-width: 100px;
    border: $border;
    text-align: center;
    line-height: 30px;
    color: rgba(0, 0, 0, 0.6);
    margin-left: -1px;
    user-select: none;
  }

  > div:first-child {
    margin-left: 0;
  }

  .active {
    border: 1px solid $topic;
    position: relative;
    z-index: 9;
  }
}

.table {
  border: $border;

  ::v-deep(.el-table tr) {
    height: 46px;

    .is-link {
      color: $topic;
    }

    td,
    th {
      border-bottom: $border !important;
    }

    .cell {
      display: flex;
      justify-content: center;
    }
  }

  ::v-deep(.el-table thead tr) {
    background: #f2f6fc;

    > th {
      background: transparent;
      text-align: center;
    }

    .el-table-fixed-column--right {
      background: #f2f6fc;
    }
  }

  ::v-deep(.el-table tbody tr:nth-child(even)) {
    background: #f2f6fc;
  }

  ::v-deep(.el-table tbody tr:last-child) {
    td {
      border-bottom: none !important;
    }
  }

  ::v-deep(.el-table__inner-wrapper) {
    &::before {
      display: none;
    }
  }

  .icon {
    width: 16px;
    height: 16px;
  }
}

.pagination {
  display: flex;
  justify-content: end;
  margin-top: 10px;
}
</style>
